<template>
  <div class="login-wrapper">
      <div >
          <section class="form_contianer animated fadeInDown">
            <div class="login_tip">
              <p>爱往亭 后台管理</p>
            </div>
            	<el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="用户名"><span>dsfsf</span></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm2')" class="login-button">登录</el-button>
                </el-form-item>
            </el-form>
          </section>
      </div>
  </div>
</template>

<script>
export default {
  name: 'list',
    data() {
     return {
				loginForm: {
					username: '',
					password: '',
				},
				rules: {
					username: [
			            { required: true, message: '请输入用户名', trigger: 'blur' },
			        ],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' }
					]
				}
			}
  },
}

</script>


<style scoped lang="stylus">
.login-wrapper
  background :#324057
  margin:0
  height:3000px
  .form_contianer
    height :400px
    width :400px
    position: absolute
    top:50%
    left: 50%
    margin-top: -190px
    margin-left: -190px
    .login_tip
      font-size :30px
      text-align :center
      color :#fff
    .login-form
      background :#fff
      width :300px
      height :150px
      border-radius :7px
      padding :50px 30px
      margin :10px 20px
      .login-button
        width :300px

</style>